{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">功能菜单/节点</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">仓库名称<font>*</font>
            </td>
            <td>
                <input type="text" name="name" disabled value="{$detail.name|default=''}" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称"
                       lay-reqText="请输入名称" class="layui-input">
            </td>
            <td class="layui-td-gray">状态<font>*</font>
            </td>
            <td>
                <select name="status"  disabled>
                    {foreach [['id'=>1,'name'=>'启用'],['id'=>2,'name'=>'禁用']] as $st}
                    <option value="{$st.id}" {if isset($detail.status)&&$detail.status==$st.id } selected {/if}>{$st.name}</option>
                    {/foreach}
                </select>

            </td>

        </tr>

        <tr>
            <td colspan="6"><h3>明细</h3></td>
        </tr>
        <tr>
            <table class="layui-table tableMany" id="w_mx" lay-filter="w_mx">
            </table>
        </tr>
    </table>
    <div class="py-3">
        <input type="hidden" name="id" value="{$id}">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
<!--        <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
    </div>
    <script type="text/html" id="mxToolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-primary " lay-event="add" type="button">添加</button>
            <!--  	<button class="layui-btn layui-btn-sm import" type="button">批量导入</button>-->
            <button class="layui-btn layui-btn-sm layui-btn-primary" type="button" id="importMx" >导入</button>
            <a href="{__EXPORTMODE__}/仓库库位导入模板.xlsx" download="" class="layui-btn layui-btn-sm layui-btn-primary">导入模板</a>
            <button class="layui-btn layui-btn-sm layui-btn-danger del" lay-event="delmx" type="button">删除</button>
        </div>
    </script>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];

    function gouguInit() {
        var form = layui.form, tool = layui.tool, level = 0;
        var table = layui.table
        var upload=layui.upload;

        var tableIns = table.render({
            elem: '#w_mx'
            ,toolbar: '#mxToolbarDemo'
            ,defaultToolbar:false
            ,title:'库位'
            ,url: "{:url('detail')}?id={$id}"
            ,page: false
            ,cellMinWidth: 80
            ,cols: [[
                {type: 'checkbox', fixed: 'left' },
                {fixed: 'left',field: 'id',title: 'ID' ,unresize: true,hide:true},
                {field:'key',title: '序号', align:'center',templet:function (d) {
                    return d.LAY_INDEX+1;
                    }},
                {field:'id', title: 'ID号', align:'center'}
                ,{field:'name',title: '库位名称',align:'center'}
            ]]
        });
        table.on('toolbar(w_mx)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus)
            switch(obj.event){
                case 'add':
                    addExpense(0,'');
                    break;
                case 'delmx':
                    var data = checkStatus.data;
                    var ids=[]
                    if (data.length){
                        data.forEach(function (value,index) {
                            console.log('value',value)
                            ids.push(value.id)
                        })
                        layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                            let callback = function (e) {
                                layer.msg(e.msg);
                                if (e.code == 0) {
                                    tableIns.reload();
                                }
                            }
                            tool.delete("{:url('delMx')}", {id: ids.join(',')}, callback);
                            layer.close(index);
                        });

                    }else {
                        layer.msg('请选择数据');
                    }

                    break;
                case 'import':

                    break;

            };
        })
        function addExpense(id,val){
            var title = '新增库位';
            if(id>0){
                title = '编辑库位';
            }
            layer.prompt({
                title: title,
                value: val,
                yes: function(index, layero) {
                    // 获取文本框输入的值
                    var value = layero.find(".layui-layer-input").val();
                    if (value) {
                        let callback = function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                tableIns.reload();
                            }
                        }
                        tool.post("{:url('detail')}", {name: value,warehouse_id:'{$id}'}, callback);
                        layer.close(index);
                    } else {
                        layer.msg('请填名称');
                    }
                }
            })
        }
        //监听提交
        form.on('submit(webform)', function (data) {
            form.on('select(pid)', function (data) {
                level = data.elem[data.elem.selectedIndex].title;
            })
            let callback = function (e) {
                layer.msg(e.msg);
                if (e.code == 0) {
                    setTimeout(function () {
                        parent.parent.location.reload();
                    }, 1000);
                }
            }
            tool.post("{:url('add')}", data.field, callback);
            return false;
        });
        upload.render({
            elem: '#importMx'
            ,url: "{:url('importMx')}?id={$id}"
            ,accept: 'file'
            ,exts: 'xlsx'
            ,done: function(res){
                layer.msg(res.msg)
                setTimeout(function () {
                    location.reload()
                },2000)
            },error:function (e) {
                console.log('e',e)
            }
        });
        layui.use(['form'], function () {
            var form = layui.form;
            form.render();
        });
    }
</script>
{/block}
<!-- /脚本 -->